<section [formGroup]="relationsQueryFormGroup" class="tb-form-panel stroked">
  <div class="tb-form-panel-title tb-required" translate>tb.rulenode.relations-query</div>
  <section>
    <div fxLayoutGap="16px" fxLayout="row">
      <mat-form-field fxFlex="50" class="mat-block" style="min-width: 100px;" hideRequiredMarker>
        <mat-label translate>relation.direction</mat-label>
        <mat-select required formControlName="direction">
          <mat-option *ngFor="let type of directionTypes" [value]="type">
            {{ directionTypeTranslations.get(type) | translate }} <span translate>tb.rulenode.relations-query-config-direction-suffix</span>
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field fxFlex="50" floatLabel="always" class="mat-block">
        <mat-label translate>tb.rulenode.max-relation-level</mat-label>
        <input matInput
               type="number"
               min="1"
               step="1"
               placeholder="{{ 'tb.rulenode.unlimited-level' | translate }}"
               formControlName="maxLevel">
        <mat-error *ngIf="relationsQueryFormGroup.get('maxLevel').hasError('min')">
          {{ 'tb.rulenode.max-relation-level-error' | translate }}
        </mat-error>
      </mat-form-field>
    </div>
    <div tb-hint-tooltip-icon="{{ 'tb.rulenode.last-level-relation-tooltip' | translate }}"
         *ngIf="relationsQueryFormGroup.get('maxLevel').value > 1"
         class="tb-form-row no-border no-padding last-level-slide-toggle">
      <mat-slide-toggle class="mat-slide" formControlName="fetchLastLevelOnly">
        {{ 'alias.last-level-relation' | translate }}
      </mat-slide-toggle>
    </div>
  </section>
  <section [formGroup]="relationsQueryFormGroup" class="tb-form-panel stroked">
    <div class="tb-form-panel-title" translate>relation.relation-filters</div>
    <tb-relation-filters
      formControlName="filters">
    </tb-relation-filters>
  </section>
</section>
